<template>
    <div class="container">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="180px" class="demo-ruleForm">
            <el-row  style="margin-top:20px;">
                <el-col :span="12">
                    <el-form-item label="申请人姓名：" prop="name">
            			{{ruleForm.name}}

                    </el-form-item>
                    <el-form-item label="申请人身份证号：" prop="idCard">
            			{{ruleForm.id_card}}

                    </el-form-item>
                    <el-form-item label="还款周期：" prop="loanPeriod">
            			{{ruleForm.loan_period}}

                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="申请用途：" prop="remarks">
            			{{ruleForm.remarks}}

                    </el-form-item>
                    <el-form-item label="申请贷款金额：" prop="amount">
            			{{ruleForm.amount}}

                    </el-form-item>

                </el-col>
            </el-row>
            <el-row>
            	<el-col :span="12">
            		<el-form-item label="身份证照片：（人像面）" >
            		     <img :src="$store.state.plantImg + ruleForm.id_card_just_img" alt="" class="imgas">
            		</el-form-item>
            		<el-form-item label="身份证照片：（国徽面）"  >
						 <img :src="$store.state.plantImg + ruleForm.id_card_back_img" alt="" class="imgas">
            		</el-form-item>
            		<el-form-item label="担保公司名称：" prop="guaranteeCompanyName">
            			{{ruleForm.guarantee_company_name}}

            		</el-form-item>
            		<el-form-item label="担保公司法人名称：" prop="guaranteeCompanyLegalPerson">
            			{{ruleForm.guarantee_company_legal_person}}

            		</el-form-item>
            		<el-form-item label="联系人：" prop="contactsPeople">
            			{{ruleForm.contacts_people}}

            		</el-form-item>
            		<el-form-item label="营业执照："  >
            		      <img :src="$store.state.plantImg + ruleForm.business_img" alt="" class="imgas">
            		</el-form-item>
            		<el-form-item label="资质认定书："  >
            		      <img :src="$store.state.plantImg + ruleForm.natural_img" alt="" class="imgas">
            		</el-form-item>
            	</el-col>
            	<el-col :span="10">
            		<el-form-item label="股权架构明细：">
            		    <img :src="$store.state.plantImg + ruleForm.shares_img" alt="" class="imgas">
            		</el-form-item>
            		<el-form-item label="贷款申请书：">
            		      <img :src="$store.state.plantImg + ruleForm.apply_img" alt="" class="imgas">
            		</el-form-item>
            		<el-form-item label="担保公司法人身份证号：" prop="guaranteeCompanyLegalPersonIdCard">
            			{{ruleForm.guarantee_company_legal_person_id_card}}

            		</el-form-item>
            		<el-form-item label="组织代码：" prop="businessLicenseNum">
            			{{ruleForm.business_license_num}}

            		</el-form-item>
            		<el-form-item label="联系人电话：" prop="contactsTel">
            			{{ruleForm.contacts_tel}}

            		</el-form-item>
            	</el-col>
            </el-row>
            <el-row>
            	<el-col :span="12">
            		<el-form-item label="抵押品：" prop="mortgage">
            			{{ruleForm.mortgage}}

            		</el-form-item>
            	</el-col>
            	<el-col :span="10">
            		<el-form-item label="抵押品估值：" prop="mortgageValue">
            			{{ruleForm.mortgage_value}}

            		</el-form-item>
            	</el-col>
            </el-row>
            <el-row v-if="ruleForm.mortgage == '土地证'">
            	<el-col :span="12">
            		<el-form-item label="土地使用权人：" prop="legalPerson">
            			{{ruleForm.legal_person}}

            		</el-form-item>
            		<el-form-item label="座落：" prop="position">
            			{{ruleForm.position}}

            		</el-form-item>
            		<el-form-item label="地号：" prop="landNum">
            			{{ruleForm.land_num}}

            		</el-form-item>
            		<el-form-item label="上传土地证："  >
            		     <img :src="$store.state.plantImg + ruleForm.prove_img" alt="" class="imgas">
            		</el-form-item>
            	</el-col>
            	<el-col :span ="10">
            		<el-form-item label="地类（用途）：" prop="purpose">
            			{{ruleForm.purpose}}

            		</el-form-item>
            		<el-form-item label="使用权类型：" prop="usufruct">
            			{{ruleForm.usufruct}}

            		</el-form-item>
            		<el-form-item label="使用权面积：" prop="area">
            			{{ruleForm.area}}

            		</el-form-item>
            	</el-col>
            </el-row>
            <el-row v-if="ruleForm.mortgage == '林权证'">
            	<el-col :span="12">
            		<el-form-item label="所有权权利人：" prop="legalPerson">
            			{{ruleForm.legal_person}}

            		</el-form-item>
            		<el-form-item label="座落：" prop="position">
            			{{ruleForm.position}}

            		</el-form-item>
            		<el-form-item label="林地使用期：" prop="term">
            			{{ruleForm.term}}

            		</el-form-item>
            		<el-form-item label="上传林权证："  >
            		     <img :src="$store.state.plantImg + ruleForm.prove_img" alt="" class="imgas">
            		</el-form-item>
            	</el-col>
            	<el-col :span ="10">
            		<el-form-item label="面积：" prop="area">
            			{{ruleForm.area}}

            		</el-form-item>
            		<el-form-item label="林种：" prop="species">
            			{{ruleForm.species}}

            		</el-form-item>

            	</el-col>
            </el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="放款时间：" prop="update_time">
						{{ruleForm.update_time}}
					</el-form-item>
					<el-form-item label="放款金额：" prop=" amount">
						{{ruleForm. amount}}
					</el-form-item>
					<el-form-item label="剩余周期：" prop="surplusNum">
						{{ruleForm.surplus_num}}
					</el-form-item>
					<el-form-item label="剩余应还：" prop="surplusAmount">
						{{ruleForm.surplus_amount}}
					</el-form-item>
				</el-col>
				<el-col :span ="10">
					<el-form-item label="放款银行：" prop="bankName">
						{{ruleForm.bankName}}
					</el-form-item>

					<el-form-item label="利率：" prop="rate">
						{{ruleForm.rate}}

					</el-form-item>
					<el-form-item label="需还总额：" prop=" totalAmount">
						{{ruleForm.totalAmount}}
					</el-form-item>
					<el-form-item label="还款时间：" prop="repaymentTime">
						{{ruleForm.repaymentTime}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
			    <el-form-item label="备注：">
			        <textarea name="" id="" cols="121" rows="5" style="border:1px solid #cccccc;" disabled v-model="ruleForm.remarks"></textarea>
			    </el-form-item>
			</el-row>
			<el-row>
				<h3>还款记录</h3>

				   <el-table
				       :data="tableData"
				       border
				       style="margin-top:20px;"
				       ref="multipleTable"
				       header-cell-class-name="table-header"
				   >
				       <el-table-column prop="name" sortable label="还款人"></el-table-column>
				       <el-table-column prop="repaymentTime" sortable label="还款时间"></el-table-column>
				   	<el-table-column prop="repaymentNum" sortable label="还款期数"></el-table-column>
				   	<el-table-column prop="amount" sortable label="还款金额"></el-table-column>
				   	<el-table-column prop="surplusNum" sortable label="剩余周期"></el-table-column>
				   	<el-table-column prop="repaidAmount" sortable label="已还金额"></el-table-column>
				   	<el-table-column prop="surplusAmount" sortable label="剩余还款"></el-table-column>

				   </el-table>
				   <el-pagination
				       layout="total, prev, pager, next, jumper"
				       :page-size="pagesize1"
				       :current-page.sync="page"
				       :total="total1"
				       @current-change="handleCurrentChange1"
				       style="margin-top: 20px"
				   ></el-pagination>
			</el-row>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from "axios"
import uploadImg from '../../../common/uploadImg';
export default {
	components: {
	    uploadImg
	},
    data() {
        return {
			tableData:[],
			total1:0,
			pagesize1:10,
			page:1,
			data1:{},
			amount:{},
			backname:{},
			bankShow:false,
			bankList:[],
            listUrl1:'',
            ruleForm: {
				status:0,
                files: '',
				mortgage:'林权证',
            },
			list:[{name:'土地证'},{name:'林权证'}],
			subBank:[],
            rules: {

            },
			id:''
        };
    },
    mounted() {
		this.id = this.$route.query.id
        this.init();
		this.init2()

    },
    methods: {
		init2(){
			let data ={
				loanId:this.ruleForm.id
			}
			axios.post("https://bbgy.cpzsyun.com:82/api/control/repayment/findByList",data).then((res)=>{
				this.tableData= res.data.rows
				this.total1 = res.data.total
			})
		},
		handleCurrentChange1(val){
			this.page = val
			this.init()
		},
		// 根据银行获取支行
        getbank(e){
			// console.log(e)
			this.backname = ""
			this.bankShow = true
			this.ruleForm.pid = e.id
			this.ruleForm.bankName = e.name
			this.subBank = e.bankInfo
		},
		// 获取支行信息
		getbankname(e){
			console.log(e)
			this.ruleForm.branchBankName = e.name
			this.ruleForm.bankInfoId = e.id
		},
		// 返回上一页
        backPage() {
            this.$router.go(-1);
        },
		// 获取详情
        init(){
			// axios.get("https://bbgy.cpzsyun.com:82/api/control/loanInfo/findById/"+this.id).then((res)=>{
			// 	this.ruleForm = res.data
			// })
			axios.get("https://bbgy.cpzsyun.com:82/api/control/loanInfo/findByIdCustomer/"+this.id).then((res)=>{
				this.ruleForm = res.data
			})
		},
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 180px;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.el-upload--text {
    width: 180px;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.imgas{
	width: 200px;
	height:200px;
}
.el-pagination {
	text-align: center;
}
</style>
